<template>
  <div>
    <div class="header">
      <back></back>

      <span class="home">
        <router-link to="/">
          <i class="fa fa-home"></i>
        </router-link>
      </span>
    </div>
    <div class="bookcount">
      <div class="detailed">
        <div>
          <p>{{book.name}}</p>
          <p>作者:{{book.author_name}}</p>
          <p>标签: <span v-for="(s,index) in book.tag">{{s}}</span> </p>
          <p>更新时间:{{book.next_post_day}}</p>
        </div>
        <!--<img :src="'http://api.ishuhui.com/'+ i.img" alt="">-->
        <img :src="'http://api.ishuhui.com/'+book.banner" alt="">

      </div>
      <p class="book">
        <span v-for="(book,index) in btitle" @click="num = index">
          {{book.title}}
        </span>
      </p>
      <span v-for="(book,index) in btitle" v-if="index == num">
        <span v-for="(b,index) in book.posts" class="book-title">
          <router-link :to="'/details/'+b[0].id">
            {{b[0].title}}
          </router-link>  
        </span>
      </span>
    </div>
  </div>
</template>
<script>
  import Back from '../components/Back'
  export default {
    data() {
      return {
        bookid: "",
        uil: "",
        cartoon: [],
        btitle: {},
        book: {},
        num:0
      }
    },
    components: {
      Back
    },
    created() {
      this.bookid = this.$route.params.id
      // console.log(this.bookid)
      this.uil = localStorage.getItem('uil')
      this.axios.get('http://api.ishuhui.com/cartoon/book_ish/ver/' + this.uil + '/id/' + this.bookid + '.json')
        .then(data => {
          // console.log(data)
          this.book = data.data.data.book
          this.btitle = data.data.data.cartoon
        })
        .catch(err => {
          console.log(err)
        })
    }
  }

</script>
<style scoped>
  .header {
    background-color: #35495e;
    color: white;
    position: fixed;
    width: 100%;
    top: 0;
    height: 44px;
    line-height: 44px;
    z-index: 10;
  }
  .book{
    font-size: .6rem;
    padding: 5px 15px;
  }
  .book>span{
   border-right: 1px solid #ccc;
   padding:0 10px; 
  }
  .detailed {
    height: 100px;
    position: relative;
  }
  
  .detailed div {
    width: 3.5rem;
    padding: 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, .6);
    color: snow;
    position: absolute;
    left: 30px;
    top: 10px;
    z-index: 5;
  }
  
  .detailed img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
  }
  
  .book-title {
    display: inline-block;
    width: 2.5rem;
    padding: 5px;
    text-align: center;
    margin: 5px 10px;
    border: 1px solid orange;
    border-radius: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .home {
    float: right;
    margin-right: 20px;
  }
  
  .home a {
    color: white;
    font-size: .5rem;
  }

</style>
